<!--
    @name 预约登记/详情
    @author 陈靖文
    @time 2021-1-25
 -->

<template>
  <el-dialog
    v-dialogDrag
    :visible="popupsVisible"
    width="70%"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="closeEdit"
    @open="opend"
  >
    <dialogHeader
      slot="title"
      title="预约管理"
      :style-type="$store.state.app.dialogType"
    />
    <div
      class="footer"
      style="width: 100%; height: 30px; line-height: 30px; padding: 12px 3%"
    >
      <el-button
        type="primary"
        class="iconfont icon-preservation"
        style="float: right;"
        :disabled="isFlag"
        @click="submitData"
      >提交</el-button>
    </div>
    <div class="filter-container filter-params">
      <el-row :gutter="26">
        <component
          :is="comp.component"
          v-for="comp in tableComponents.filter(o => o.isMust === true)"
          :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
          :key="comp.compKey"
          :validrule="comp.validrule"
          :code-field="comp.codeField"
          :text-field="comp.textField"
          :popups-key="comp.compKey"
          :parent-fileds="comp.parentFileds"
          :code="formField[comp.codeField]"
          :disabled="comp.disabled"
          :o-fields="comp.oFields"
          :options="comp.options"
          :custom-obj="comp.customObj"
          :is-require="comp.isRequire"
          :is-mul="comp.isMul"
          :span="comp.span || 24"
          :label-name="comp.labelName"
          :lookuptype="comp.lookuptype"
          :data-to-object="comp.dataToObject"
          :format="comp.dateFormat"
          :date-type="comp.dateType"
          :date-options-type="comp.dateOptionsType"
          @changeCode="getComponentCode"
          @focusCode="getFocusCode"
        />
      </el-row>
    </div>
    <tab-tables ref="tp" :tab-panes="tabPanes" :tab-options="opt">
      <template #partInfo_tb1_partNum="scope">
        <el-input
          v-model="scope.row[scope.col.prop]"
          placeholder="请输入"
          oninput="this.value=this.value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
          @change="rowChange(scope.row, scope.col, scope.index)"
        />
      </template>
      <template #otherInfo_tb2_remark="scope">
        <el-input
          v-model="scope.row[scope.col.prop]"
          placeholder="请输入"
          @change="rowChange(scope.row, scope.col, scope.index)"
        />
      </template>
      <template #otherInfo_tb2_otherAmount="scope">
        <el-input
          v-model="scope.row[scope.col.prop]"
          placeholder="请输入"
          oninput="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
          @change="rowChange(scope.row, scope.col, scope.index)"
        />
      </template>
    </tab-tables>

    <appointment-maintain-select
      :popups-visible.sync="open"
      :edit-data="editData"
      @returnData="returnData"
    />
    <wi-query
      :popups-visible.sync="openwi"
      :dynamic-edit-row-data="timeSelectionRowData"
      :chosen-list="chosenList"
      @selectRows="selectRows"
    />
    <part-query
      :popups-visible.sync="openPart"
      :dynamic-edit-row-data="spareSelectionRowData"
      :chosen-list="chosenListP"
      @selectRows="selectRows"
    />
    <other-add
      :popups-visible.sync="openOther"
      :dynamic-edit-row-data="otherRowData"
      :chosen-list="chosenListO"
      @selectRows="selectRows"
    />
  </el-dialog>
</template>

<script>
import mapi from '@/views/se/appointmentManage/appointmentSelect/mapi'
import { managements } from '@/api/se/bookingManagement'
import { formMixins } from '@/components/mixins/formMixins'
import dialogHeader from '@/components/dialogHeader'
import OneTableTemplate from '@/components/templates/oneTable'
import tabTables from '@/views/se/serviceActivities/serviceRelease/components/tabTables'
import appointmentMaintainSelect from '@/components/se/appointmentSelect/appointmentMaintainSelect'
import wiQuery from '@/views/se/appointmentManage/components/wiQuery'
import partQuery from '@/views/se/appointmentManage/components/partQuery'
import otherAdd from '@/views/se/appointmentManage/components/otherAdd'

export default {
  components: {
    wiQuery,
    partQuery,
    otherAdd,
    dialogHeader,
    OneTableTemplate,
    tabTables,
    appointmentMaintainSelect
  },
  mixins: [formMixins],
  props: {
    popupsVisible: { type: Boolean, default: false },
    // 从网格传入的编辑行数据(json)
    dataForForm: {
      type: Object,
      default: function() {
        return {}
      }
    },
    dynamicEditRowData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    checkNewCode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      valid: false,
      editData: {},
      dlrCustNo: '',
      flag: '',
      chosenList: [],
      chosenListP: [],
      chosenListO: [],
      isFlag: false,
      checkFlag: '',

      mainDatas: {},
      openwi: false,
      openPart: false,
      openOther: false,
      open: false,

      carCustId: '',

      tabPanes: [
        {
          index: 0,
          name: 'wiInfo',
          title: '工时信息',
          tables: [
            {
              name: 'tb1',
              tableData: [],
              hasSelection: false,
              height: '300',
              tableLoading: false, // 显示表格隐藏加载
              loadingText: '正在加载工时信息...', // 加载文字
              handleBtn: {
                text: '删除',
                clickEvent: scope => {
                  const { reserveOrderId } = this.dynamicEditRowData
                  const index = scope.$index
                  if (this.isFlag == true) {
                    this.$message('不能操作')
                    return false
                  }
                  if (this.popupsState === 'add') {
                    this.tabPanes[0].tables[0].tableData.splice(index, 1)
                  } else if (
                    this.tabPanes[0].tables[0].tableData[index].flag == '1'
                  ) {
                    this.$requestAPI({
                      apiUrl:
                        mapi.delAppointmentWiByIdAndOrderCodeUsingPOST.APIUrl,
                      variables: {
                        ...this.tabPanes[0].tables[0].tableData[index],
                        reserveOrderId
                      }
                    })
                      .then(res => {
                        if (res.result === '1') {
                          this.tabPanes[0].tables[0].tableData.splice(index, 1)
                          this.$message('成功删除！')
                        } else {
                          this.$message(res.msg ? res.msg : '')
                        }
                      })
                      .catch(err => {
                        if (err.response.data.msg) {
                          this.$message(err.response.data.msg)
                        } else {
                          this.$message(err.message)
                        }
                      })
                  } else {
                    this.tabPanes[0].tables[0].tableData.splice(index, 1)
                  }
                }
              },
              tableButtons: [
                {
                  compKey: 'btn1',
                  type: 'primary',
                  class: 'iconfont icon-details',
                  text: '保养项目',

                  clickEvent: () => this.mainProject()
                },
                {
                  compKey: 'btn2',
                  type: 'primary',
                  class: 'iconfont icon-newlyAdded',
                  text: '新增',

                  clickEvent: () => {
                    this.chosenList = this.tabPanes[0].tables[0].tableData.map(
                      o => ({
                        wiCode: o['wiCode'],
                        carTypeCode: o['carTypeCode']
                      })
                    )
                    this.openwi = true
                  }
                }
              ],
              tableCols: [
                { prop: 'wiCode', label: '工时编码', isSlot: false },
                { prop: 'repairContent', label: '维修内容', isSlot: false },
                { prop: 'saleWiQty', label: '标准工时', isSlot: false },
                { prop: 'wiPrice', label: '工时单价', isSlot: false },
                { prop: 'total', label: '费用', isSlot: false }
              ]
            }
          ]
        },
        {
          index: 1,
          name: 'partInfo',
          title: '备件信息',
          tables: [
            {
              name: 'tb1',
              tableData: [],
              hasSelection: false,
              height: '300',
              tableLoading: false, // 显示表格隐藏加载
              loadingText: '正在加载备件信息...', // 加载文字
              handleBtn: {
                text: '删除',
                clickEvent: scope => {
                  const index = scope.$index
                  const { reserveOrderId } = this.dynamicEditRowData
                  if (this.isFlag == true) {
                    this.$message('不能操作')
                    return false
                  }
                  if (this.popupsState === 'add') {
                    this.tabPanes[1].tables[0].tableData.splice(index, 1)
                  } else if (
                    this.tabPanes[1].tables[0].tableData[index].flag == '1'
                  ) {
                    this.$requestAPI({
                      apiUrl:
                        mapi.delAppointmentPartByIdAndCodeUsingPOST.APIUrl,
                      variables: {
                        ...this.tabPanes[1].tables[0].tableData[index],
                        reserveOrderId
                      }
                    })
                      .then(res => {
                        if (res.result === '1') {
                          this.tabPanes[1].tables[0].tableData.splice(index, 1)
                          this.$message('成功删除！')
                        } else {
                          this.$message(res.msg ? res.msg : '')
                        }
                      })
                      .catch(err => {
                        if (err.response.data.msg) {
                          this.$message(err.response.data.msg)
                        } else {
                          this.$message(err.message)
                        }
                      })
                  } else {
                    this.tabPanes[1].tables[0].tableData.splice(index, 1)
                  }
                }
              },
              tableButtons: [
                {
                  compKey: 'btn1',
                  type: 'primary',
                  class: 'iconfont icon-details',
                  text: '保养项目',
                  clickEvent: () => this.mainProject()
                },
                {
                  compKey: 'btn2',
                  type: 'primary',
                  class: 'iconfont icon-newlyAdded',
                  text: '新增',
                  clickEvent: () => {
                    this.chosenListP = this.tabPanes[1].tables[0].tableData.map(
                      o => o['partNo']
                    )
                    this.openPart = true
                  }
                }
              ],
              tableCols: [
                { prop: 'partNo', label: '备件编码', isSlot: false },
                { prop: 'partName', label: '备件名称', isSlot: false },
                { prop: 'partNum', label: '数量', isSlot: true }, // 这里
                { prop: 'purchasePrice', label: '单价', isSlot: false },
                { prop: 'total', label: '费用', isSlot: false },
                { prop: 'partRepairType', label: '维修类别', isSlot: false }
                // { prop: 'partRepairTypeCode', label: '维修类别', hidden: true}
              ]
            }
          ]
        },
        {
          index: 2,
          name: 'otherInfo',
          title: '其他项目',
          tables: [
            {
              name: 'tb2',
              tableData: [],
              hasSelection: false,
              height: '300',
              tableLoading: false, // 显示表格隐藏加载
              loadingText: '正在加载其他项目...', // 加载文字
              handleBtn: {
                text: '删除',
                clickEvent: scope => {
                  const index = scope.$index
                  const { reserveOrderId } = this.dynamicEditRowData
                  if (this.isFlag == true) {
                    this.$message('不能操作')
                    return false
                  }
                  if (this.popupsState === 'add') {
                    this.tabPanes[2].tables[0].tableData.splice(index, 1)
                  } else if (
                    this.tabPanes[2].tables[0].tableData[index].flag == '1'
                  ) {
                    this.$requestAPI({
                      apiUrl:
                        mapi.delAppointmentOtherByIdAndOrderCodeUsingPOST
                          .APIUrl,
                      variables: {
                        ...this.tabPanes[2].tables[0].tableData[index],
                        reserveOrderId
                      }
                    })
                      .then(res => {
                        if (res.result === '1') {
                          this.tabPanes[2].tables[0].tableData.splice(index, 1)
                          this.$message('成功删除！')
                        } else {
                          this.$message(res.msg ? res.msg : '')
                        }
                      })
                      .catch(err => {
                        if (err.response.data.msg) {
                          this.$message(err.response.data.msg)
                        } else {
                          this.$message(err.message)
                        }
                      })
                  } else {
                    this.tabPanes[2].tables[0].tableData.splice(index, 1)
                  }
                }
              },
              tableButtons: [
                {
                  compKey: 'btn1',
                  type: 'primary',
                  class: 'iconfont icon-details',
                  text: '保养项目',
                  clickEvent: () => this.mainProject()
                },
                {
                  compKey: 'btn2',
                  type: 'primary',
                  class: 'iconfont icon-newlyAdded',
                  text: '新增',
                  clickEvent: () => {
                    this.chosenListO = this.tabPanes[2].tables[0].tableData.map(
                      o => o['repairOtherName']
                    )
                    this.openOther = true
                  }
                }
              ],
              tableCols: [
                { prop: 'remark', label: '项目描述', isSlot: true },
                { prop: 'repairOtherName', label: '其他项目', isSlot: false },
                { prop: 'otherAmount', label: '费用合计', isSlot: true }, // 这里
                { prop: 'repairOtherRemark', label: '备注', isSlot: false }
              ]
            }
          ]
        }
      ],
      opt: {
        activeName: 'wiInfo',
        tabClick: (tab, event) => {}
      },
      titleName: '预约登记详情 ',
      activeName: 'second',
      tableComponents: [
        {
          compKey: 'compKey1',
          labelName: '预约单号',
          codeField: 'reserveOrderCode',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true,
          span: 8
        },
        {
          compKey: 'compKey3',
          labelName: 'VIN码',
          codeField: 'vin',
          component: () => import('@/components/se/appointmentVIN'),
          type: 'inputText',
          disabled: false,
          isMust: true,
          isRequire: true,
          span: 8
        },
        {
          compKey: 'compKey2',
          labelName: '车牌号',
          codeField: 'carLicense',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true,
          validrule: {
            iscPattern: true
          },
          span: 8
        },
        {
          compKey: 'compKey4',
          labelName: '车系',
          codeField: 'carSeriesCn',
          textField: 'carSeriesCode',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true,
          span: 8
        },
        {
          compKey: 'compKey5',
          labelName: '车型',
          codeField: 'carConfigCn',
          textField: 'carConfigCode',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey6',
          labelName: '客户名称',
          codeField: 'custName',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey7',
          labelName: '联系电话',
          codeField: 'custTel',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true,
          span: 8
        },
        {
          compKey: 'compKey8',
          labelName: '预约人',
          codeField: 'reserveMan',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: false,
          isRequire: true,
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey9',
          labelName: '预约电话',
          codeField: 'reserveTel',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: false,
          isMust: true,
          isRequire: true,
          validrule: {
            isPhone: true,
            maxlength: 11
          },
          span: 8
        },
        {
          compKey: 'compKey10',
          labelName: '预约时间',
          codeField: 'appointDate',
          component: () => import('@/components/org/datePicker/datePicker'),
          dateType: 'datetime',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          isMust: true,
          disabled: false,
          isRequire: true,
          span: 8
        },
        {
          compKey: 'compKey11',
          labelName: '服务顾问',
          codeField: 'saEmpId',
          textField: 'empName',
          component: () => import('@/components/org/commonSelect'),
          customObj: {
            api: {
              APIUrl:
                '/mp/e3sh/aftersale/WorkOrderManagementService/serviceConsultant.do'
            },
            selectType: '1',
            defOptionFields: ['saEmpId', 'empName']
          },
          type: 'dropdownList',
          isMust: true,
          disabled: false,
          isRequire: true,
          span: 8
        },
        {
          compKey: 'compKey12',
          labelName: '预约状态',
          codeField: 'reserveStateCode',
          textField: 'reserveState',
          lookuptype: 'SE0024',
          component: () => import('@/components/org/commonSelect'),
          customObj: {
            api: {
              APIUrl:
                '/mp/e3sh/aftersale/appointmentVolumnService/queryListOfValues.do'
            },
            selectType: '1'
          },
          type: 'dropdownList',
          isMust: true,
          disabled: true,
          span: 8
        },
        {
          compKey: 'compKey13',
          labelName: '预约来源',
          codeField: 'reserveSourceCode',
          textField: 'reserveSource',
          lookuptype: 'SE0171',
          component: () => import('@/components/org/commonSelect'),
          customObj: {
            api: {
              APIUrl:
                '/mp/e3sh/aftersale/appointmentVolumnService/queryListOfValues.do'
            },
            selectType: '1'
          },
          type: 'inputText',
          isMust: true,
          disabled: true,
          span: 8
        },
        {
          compKey: 'compKey14',
          labelName: '取送车',
          codeField: 'isPickDeliveryCode',
          textField: 'isPickDelivery',
          lookuptype: 'SE1004',
          component: () => import('@/components/org/commonSelect'),
          customObj: {
            api: {
              APIUrl:
                '/mp/e3sh/aftersale/appointmentVolumnService/queryListOfValues.do'
            },
            selectType: '1'
          },
          type: 'dropdownList',
          isMust: true,
          disabled: false,
          span: 8
        },

        {
          compKey: 'compKey15',
          labelName: '拖车救援',
          codeField: 'isHelpCode',
          textField: 'isHelp',
          lookuptype: 'SE1003',
          component: () => import('@/components/org/commonSelect'),
          customObj: {
            api: {
              APIUrl:
                '/mp/e3sh/aftersale/appointmentVolumnService/queryListOfValues.do'
            },
            selectType: '1'
          },
          type: 'dropdownList',
          isMust: true,
          disabled: false,
          span: 8
        },
        {
          compKey: 'compKey16',
          labelName: '预约内容',
          codeField: 'csDesc',
          component: () => import('@/components/org/commonInput/textareaInput'),
          type: 'inputText',
          isMust: true,
          disabled: false,
          span: 24
        },
        {
          compKey: 'compKey17',
          labelName: '上次建议项目',
          codeField: 'lastRecommendItem',
          component: () => import('@/components/org/commonInput/textareaInput'),
          type: 'inputText',
          isMust: true,
          disabled: false,
          span: 24
        }
      ],

      formField: {
        isOtherCar: '',
        carSeriesCode: ''
      },
      tableCols: [
        {
          prop: 'wiCode',
          label: '工时编码',
          align: 'center'
        },
        {
          prop: 'wiName',
          label: '维修内容',
          align: 'center'
        },
        {
          prop: 'saleWorkQty',
          label: '工时标准',
          align: 'center'
        },
        {
          prop: 'wiPrice',
          label: '工时单价',
          align: 'center'
        },
        {
          prop: 'wiPreAmount',
          label: '费用',
          align: 'center'
        },
        {
          prop: 'repairTypeName',
          label: '维修类别',
          align: 'center'
        }
      ],
      tableCols2: [
        {
          prop: 'partNo',
          label: '备件编码',
          align: 'center'
        },
        {
          prop: 'partName',
          label: '备件名称',
          align: 'center'
        },
        {
          prop: 'partQty',
          label: '数量',
          align: 'center'
        },
        {
          prop: 'purchasePrice',
          label: '单价',
          align: 'center'
        },
        {
          prop: 'prePartAmount',
          label: '费用',
          align: 'center'
        },
        {
          prop: 'businessType',
          label: '维修类别',
          align: 'center'
        },
        {
          prop: 'partRepairTypeCode',
          label: '维修类别',
          align: 'center',
          hidden: true
        }
      ]
    }
  },
  watch: {
    // 监听VIN码
    'formField.vin'(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.queryCar()
      }
    }
  },
  created() {
    this.checkFlag = this.checkNewCode

    if (
      this.dynamicEditRowData.repairOrderCode != null ||
      this.dynamicEditRowData.reserveStateCode == 0 ||
      this.dynamicEditRowData.reserveStateCode == 1 ||
      this.dynamicEditRowData.reserveStateCode == 2 ||
      this.checkFlag == true
    ) {
      this.isFlag = true
    }
    this.genFormField()
    this.formField['dlrCustNo'] = ''
    this.execCreated()
    this.setDisable()
    this.formField.reserveOrderId = this.dynamicEditRowData.reserveOrderId
    this.formField.updateControlId = this.dynamicEditRowData.updateControlId
  },
  mounted() {
    if (this.popupsState === 'edit') {
      // 获取工时 备件数据
      const sendDatas = {
        reserveOrderCode: this.dynamicEditRowData.reserveOrderCode,
        reserveOrderId: this.dynamicEditRowData.reserveOrderId
      }
      this.getWiPartData(sendDatas)
      this.tableComponents[1].disabled = true
    }
    //  按钮置灰
    this.tabPanes[0].tables[0].tableButtons.forEach(item => {
      item.disabled = this.isFlag
    })
    this.tabPanes[1].tables[0].tableButtons.forEach(item => {
      item.disabled = this.isFlag
    })
    this.tabPanes[2].tables[0].tableButtons.forEach(item => {
      item.disabled = this.isFlag
    })
  },
  methods: {
    mainProject() {
      if (this.popupsState === 'edit') {
        this.editData = this.$utils.deepCopy(this.dynamicEditRowData)
        this.open = true
      } else {
        this.editData = this.mainDatas
        this.editData.carTypeCode = this.mainDatas.carConfigCode
        this.open = true
      }
    },
    queryCar() {
      const that = this
      const info = {}
      info.vin = this.formField.vin
      info.isOtherCar = this.formField.isOtherCar
      if (info.isOtherCar === '0') {
        this.$requestAPI({
          apiUrl: mapi.queryOrderDetailByCarLicenseUsingPOST.APIUrl,
          variables: info
        }).then(res => {
          this.mainDatas = res.rows[0]
          const resDatas = res.rows[0]
          const attrs = ['vin', 'carConfigCn', 'carConfigCode', 'carCustId', 'carLicense',
            'carSeriesCn', 'custName', 'custTel', 'isOtherCar', 'phone'
          ]
          attrs.forEach(attr => {
            if (Object.prototype.hasOwnProperty.call(this.formField, attr)) {
              this.formField[attr] = resDatas[attr] === null ? '' : resDatas[attr]
            }
          })
          that.carCustId = res.rows[0].carCustId
        })
      } else if (info.isOtherCar === '1') {
        // 他牌车
        this.$requestAPI({
          apiUrl: mapi.carOtherInforList.APIUrl,
          variables: info
        }).then(res => {
          this.mainDatas = res.rows[0]
          for (const i in that.formField) {
            that.formField[i] = res.rows[0][i]
          }
        })
      }
    },

    opend() {
      this.queryMain()
      const sendDatas = {
        reserveOrderCode: this.dataForForm.reserveOrderCode,
        reserveOrderId: this.dataForForm.reserveOrderId
      }
      this.getWiPartData(sendDatas)
    },

    queryMain() {
      const obj = {
        reserveOrderCode: this.dataForForm.reserveOrderCode
      }
      this.$requestAPI({
        apiUrl: managements.AppointmentInfo.APIUrl,
        variables: obj
      })
        .then(res => {
          this.formField = res.rows
        })
        .catch(err => {
          console.log(err)
        })
    },

    returnData(wiTable, partTable, otherTable) {
      wiTable.forEach((item, v) => {
        this.tabPanes[0].tables[0].tableData.push(item)
      })
      partTable.forEach((item, v) => {
        this.tabPanes[1].tables[0].tableData.push(item)
      })
      otherTable.forEach((item, v) => {
        this.tabPanes[2].tables[0].tableData.push(item)
      })
    },

    getWiPartData(sendDatas) {
      this.$requestAPI({
        apiUrl: mapi.queryAppointmentWiAndPartUsingPOST.APIUrl,
        variables: sendDatas
      })
        .then(res => {
          if (res.result === '1') {
            const { wis, parts, others } = res.rows[0]
            this.tabPanes[0].tables[0].tableData = wis
            this.tabPanes[1].tables[0].tableData = parts
            this.tabPanes[2].tables[0].tableData = others
          } else {
            this.$message(res.msg ? res.msg : '')
          }
        })
        .catch(err => {
          if (err.response.data.msg) {
            this.$message(err.response.data.msg)
          } else {
            this.$message(err.message)
          }
        })
    },
    // 提交
    submitData() {
      this.$utils.validataMoth(this, 'validpopup')
      if (!this.valid) return this.$message('校验未通过，请检查后在提交！')
      const loading = this.$loading({ text: `请稍等...` })
      this.$requestAPI({
        apiUrl: mapi.insertAppointmentUsingPOST.APIUrl,
        variables: {
          ...this.formField,
          wi: this.tabPanes[0].tables[0].tableData,
          part: this.tabPanes[1].tables[0].tableData,
          other: this.tabPanes[2].tables[0].tableData,
          dlrCustNo: this.carCustId,
          carCustId: this.dynamicEditRowData.carCustId,
          carSeriesCn: this.dynamicEditRowData.carSeriesCn
        }
      })
        .then(res => {
          if (res.result === '1') {
            this.$message({
              message: res.msg
            })
            this.closeEdit()
            this.$parent.queryTable()
          } else {
            this.$message(res.msg ? res.msg : '')
          }
        })
        .catch(err => {
          if (err.response.data.msg) {
            this.$message(err.response.data.msg)
          } else {
            this.$message(err.message)
          }
        })
        .finally(() => {
          loading.close()
        })
    },
    // 动态计算 费用
    rowChange(row, col, scope) {
      if (Number(row['partNum']) > 999999) {
        this.$message('数量超过上限不能提交')
        return false
      }
      this.$set(
        row,
        'total',
        (Number(row['purchasePrice']) * Number(row['partNum'])).toFixed(2)
      )
    },
    genFormField() {
      const viewPageCode = this.$route.path
      this.genCodeFiled = this.genUtil(this.tableComponents)
      const formField = this.genCodeFiled()
      this.formField = this.$utils.getFormField(
        this,
        formField,
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    },

    // 生成formField
    genUtil: array => (attr1 = 'codeField', attr2 = 'textField') =>
      array.reduce((p, c) => {
        if (c[attr1].includes(',')) {
          const d = c[attr1].split(',')
          for (let i = 0; i < d.length; i++) {
            p[d[i]] = ''
          }
        } else {
          p[c[attr1]] = ''
        }
        // eslint-disable-next-line no-prototype-builtins
        c.hasOwnProperty(attr2) ? (p[c[attr2]] = '') : ''
        return p
      }, {}),
    // 工时选择返回 数据
    selectRows(selections, type) {
      if (type === 'wi') {
        // 备份wi数据
        const wiCurData = this.$utils.deepCopy(
          this.tabPanes[0].tables[0].tableData
        )
        this.$utils.deepCopy(selections).forEach(item => {
          // 计算费用
          item['total'] = (
            Number(item['saleWiQty']) * Number(item['wiPrice'])
          ).toFixed(2)
          wiCurData.push(item)
        })
        this.tabPanes[0].tables[0].tableData = wiCurData
        // this.updateWiTable(wiCurData)
      } else if (type === 'part') {
        // 备份 part 数据
        const partCurData = this.$utils.deepCopy(
          this.tabPanes[1].tables[0].tableData
        )
        this.$utils.deepCopy(selections).forEach(item => {
          partCurData.push(item)
        })
        this.tabPanes[1].tables[0].tableData = partCurData
        // this.updatePartTable(partCurData)
      } else {
        // 其他项目数据
        const otherCurData = this.$utils.deepCopy(
          this.tabPanes[2].tables[0].tableData
        )
        this.$utils.deepCopy(selections).forEach(item => {
          otherCurData.push(item)
        })
        this.tabPanes[2].tables[0].tableData = otherCurData
      }
    },
    closeEdit() {
      this.$emit('update:popups-visible', false)
      this.reset()
    }
  }
}
</script>

<style lang="scss" scoped>
div.fixHeight {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
div.filter-container {
  margin-top: 20px;
}
.el-table .warm-row {
  background: #eedbae;
}

.eltabs {
  position: relative;
}
.btn {
  z-index: 999999;
  position: absolute;
  top: 0;
  right: 10px;
}
/deep/.el-table__body .el-table__row td:nth-child(6) span{
 text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/deep/.el-table__body .el-table__row td:nth-child(6) span:hover{
width: auto;
text-overflow:clip clip;
overflow: visible;
white-space: normal;
}
</style>
